import {designPage, reactive} from "plain-design-composition";
import {DemoRow} from "../../Demo/DemoRow";
import {TimePicker} from "../../../../packages/components/TimePicker";

export const demo1 = designPage(() => {

  const state = reactive({
    formData: {} as any
  });

  return () => (
    <DemoRow title="基本用法">
      <TimePicker width="200" v-model={state.formData.time}/> {JSON.stringify(state.formData.time)}
    </DemoRow>
  );
});


export const demo2 = designPage(() => {

  const state = reactive({
    formData: {
      time: {}
    } as any
  });

  return () => (
    <DemoRow title="范围选择">
      <TimePicker
        range
        width="300"
        v-model:start={state.formData.time.start}
        v-model:end={state.formData.time.end}
      />
      {JSON.stringify(state.formData.time)}
    </DemoRow>
  );
});
